import React,{useState} from 'react';
import { Space, Table, Tag,Button,Modal,Popconfirm,Pagination } from 'antd';
import type { TableProps } from 'antd';
import { useAppDispatch,useAppSelector } from '../../store/reactreduxts';
import Myform from './myform';
import * as actions from '../../store/crmsSlice'
interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}



const data: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sydney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];

const App: React.FC = () =>{ 
//数据
let obj=useAppSelector(state=>state.todos)
let dispatch=useAppDispatch()
console.log(obj);

//添加//编辑
let [title,setTitle] =useState()
let [itemobj,setItemobj] =useState()

//分页
const [current,setcurrent]=useState(1)
const [pageSize,setpageSize]=useState(3)
const [total,settotal]=useState(obj.shoplist.length)
//弹层
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };


//表格
const columns: TableProps<DataType>['columns'] = [
  {
    title: '优惠卷名称',
    dataIndex: 'couponName',
  },
  {
    title: '优惠卷面值',
    dataIndex: 'discountAmount',
  },
  {
    title: '优惠卷最低消费',
    dataIndex: 'minSpend',
  },
    {
    title: '优惠卷有效期',
    dataIndex: 'validityPeriod',
  },
  {
    title: '排序',
    dataIndex: 'sortOrder',
  },
  {
    title: '状态',
    dataIndex: 'status',
    render:(status)=>{
        return <Tag color={status?"blue":"red"}>{status?"开启":"取消"}</Tag>
    }
  },
    {
    title: '创建时间',
    dataIndex: 'createTime',
  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
       <Button type='primary'
       onClick={()=>{
        showModal()
        setTitle('编辑')
        setItemobj(record)
    }}
       >编辑</Button>
     <Popconfirm
    title="提示"
    description="你确定删除么？"
    onConfirm={()=>{
        //执行删除
        dispatch(actions.async_delshoplist(record.id))
    }}
    okText="是"
    cancelText="否"
  >
    <Button danger>删除</Button>
  </Popconfirm>
      </Space>
    ),
  },
];
    return <div>
      <Button type="primary" onClick={()=>{
        showModal()
        setTitle('添加')
        setItemobj({})
      }}>
        添加
      </Button>
      <Modal
        title={title}
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={null}
      >
       <Myform key={new Date().getTime()} title={title} itemobj={itemobj}  onCancel={handleCancel}></Myform>
      </Modal>
         <Table<DataType> columns={columns} dataSource={obj.shoplist} rowKey={"id"}
            pagination={{
                current,
                pageSize,
                pageSizeOptions:[3,6,9],
                showSizeChanger:true,
                total,
                onChange:(page,pageSize)=>{
                    setcurrent(page)
                    setpageSize(pageSize)
                }
            }}
            />
    </div>
}

export default App;